<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<link href="/static/css/login.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/static/js/jquery/jquery.js"  ></script>
</head>

<body class="login" >
<div class="login_m">
    <div class="login_logo"><img src="/static/images/logo.png" width="196" height="46"></div>
    <div class="login_boder">
        <div class="login_padding" id="login_model">
        <form id="login_form" action="index" method="POST">
            <h2>USERNAME</h2>
            <label>
                <input type="text" id="username" name="username" class="txt_input txt_input2" placeholder="Your name">
            </label>
            <span class="uspan" style="color:red;"></span>
            <h2>PASSWORD</h2>
            <label>
                <input type="password" id="userpwd" name="pwd"  class="txt_input"  placeholder="the password">
            </label>
            <span class="pspan" style="color:red;"></span>
            <h2>CAPTCHA</h2>
            <label>
                <input type="text"  id="verify" name="verify" class="txt_input"  placeholder="the captcha">
            </label>
            <span class="cspan" style="color:red;"></span>
            <div class="third">
                <label>
                    <img src="{:captcha_src()}" id="verify"  width="120px" height="40px" style="display:inline-block;" onclick="this.src='{:captcha_src()}?tmp='+Math.random()">
                </label>
                <p class="forgot" style="display:inline-block;"><a href="getpwd">Forgot your password?</a></p>
            </div>
            <div class="rem_sub">
                <label>
                    <input type="submit" class="sub_button"  id="button" value="登陆" style="opacity: 0.7;">
                </label>
            </div>
        </form>
        </div><!--login_padding  Sign up end-->     
    </div><!--login_boder end-->

<div class="copyrights">Collect from <a href="#" >#########</a></div>

</div><!--login_m end-->
<script  >
$(function () {
    var issubmit=true; 

    $('#button').css('opacity', 0.7).hover(function () {
        $(this).stop().fadeTo(650, 1);
    }, function () {
        $(this).stop().fadeTo(650, 0.7);
    });

    function checkEmpty(data,holder,msg){
        if(data.length <= 0){
            $(holder).html(msg);
             return false;
        }else{
            $(holder).html('');
            return true; 
        }
    }

    $("#username").blur(function(){
        var uname=$(this).val();
        issubmit=checkEmpty(uname,'.uspan','* 用户名不能为空');
    });

    $("#userpwd").blur(function(){
        var upwd=$(this).val();
        issubmit=checkEmpty(upwd,'.pspan','* 密码不能为空');
    })


    $("#login_form").submit(function () {
        var uname=$("#username").val();
        var upwd=$("#userpwd").val();
        var verify=$("#verify").val();

        issubmit=checkEmpty(uname,'.uspan','* 用户名不能为空');
        if(!issubmit)  return false;
        issubmit=checkEmpty(upwd,'.pspan','* 密码不能为空');
        if(!issubmit)  return false;
        issubmit=checkEmpty(verify,'.cspan','* 验证不能为空');
        if(!issubmit)  return false;
    });
});
</script>

</body>
</html>